<template>
  <div class="msg-wrapper" v-show="isShow">
    <div class="msg-content">
      <div class="msg-title" v-show="(title != '')" v-html="title"></div>
      <div class="msg-message" v-html="message"></div>
      <div class="msg-button-box clear">
        <div class="msg-cancel-button left" v-show="cancelButton" v-html="cancelButtonText"
             @click="cancelCallback"></div>
        <div :class="{'msg-confirm-button': true, 'right': true, 'no-cancel-style': !cancelButton}"
             v-html="confirmButtonText" @click="confirmCallback"></div>
      </div>
    </div>
    <div class="msg-mask"></div>
  </div>
</template>
<script>
  import $ from 'jquery'

  export default {
    name: 'msg',
    data() {
      return {
        isShow: false,
        title: '',
        message: '',
        cancelButton: false,
        cancelButtonText: '取消',
        confirmButtonText: '确认'
      }
    },
    props: ['messageOptions'],
    watch: {
      messageOptions: function (newValue) {
        this.isShow = true
        this.title = newValue.title || ''
        this.message = newValue.message || ''
        this.cancelButton = newValue.cancelButton
        this.cancelButtonText = newValue.cancelButtonText || '取消'
        this.confirmButtonText = newValue.confirmButtonText || '确认'
      }
    },
    methods: {
      confirmCallback() {
        this.cancelCallback()
        this.messageOptions.confirmCallback && this.messageOptions.confirmCallback()
      },
      cancelCallback() {
        this.isShow = false
      }
    },
    mounted() {
      $('.msg-wrapper').width($('body').width()).height($('body').height())
    }
  }
</script>
<style scoped lang="scss">
  @import "../../assets/css/config";

  .msg-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    .msg-mask {
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, .5);
    }
    .msg-content {
      @extend .center;
      width: r(270);
      border-radius: r(4);
      background-color: #fff;
      text-align: center;
      color: $blackColor;
      padding: r(10.8);
      .msg-title {
        font-size: r(17);
        font-weight: 600;
      }
      .msg-message {
        font-size: r(15);
        line-height: r(20);
        margin: r(10) 0;
        word-wrap: break-word;
      }
      .msg-button-box {
        height: r(40);
        width: 100%;
        .button-style {
          width: r(115);
          height: 100%;
          font-size: r(17);
          line-height: r(40);
          border-radius: r(4);
        }
        .msg-cancel-button {
          background-color: #D5D5D5;
          @extend .button-style;
        }
        .msg-confirm-button {
          @extend .button-style;
          background: #FED953;
          &.no-cancel-style {
            width: 100%;
            margin: 0;
          }
        }
      }
    }
  }
</style>
